<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>为Vue组件传递数据——组件参数验证</title>
    <!-- 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app-7">
        <input type="text" v-model="myage">
        <say-hello :age="myage"></say-hello>
    </div>
    <script>

        Vue.component('say-hello', {
            props: {
                age: {
                    type: Number,
                    required: true,
                    validator: function (value) {
                        return value >= 0
                    }
                }
            },
            template: '<div><p>{{age}}岁</p></div>'
        })

        var app7 = new Vue({
            el: '#app-7',
            data: {
                myage: 18
            }
        })
    </script>
</body>

</html>
